<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"> 

<h:head>
<title>Login</title>
  <style type="text/css">
    body{
     	background-color:white;
    }
    #login-box{
      background-color:1992b7;
      width: 340px;
      height: 220px;
      margin: 140px auto 0px;
      border-radius: 5px;
    }
    
    #login-box-interno{
      width: 320px;
      height: 240px;
      background-color:#fdfdfd;
      position:absolute;
      margin:10px;
      border-radius:5px;
      box-shadow: 0px 0px 5px black;
      overflow:hidden;
    }
    
    #login-box-label{
      height:45px;
      text-align:center;
      font: bold 14px/45px sans-serif;
      border-top-left-radius:5px;
      border-top-right-radius:5px;
      background: rgb(246,248,249); /* Old browsers */
      background: -moz-linear-gradient(top,  rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1))); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* IE10+ */
      background: linear-gradient(to bottom,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 ); /* IE6-9 */
      border-bottom: 1px solid #bfc3c5;
      box-shadow: 1px 0px 3px #dedede;      
      color:#555555;
    }
    
    .input-div{
      width:270px;
      margin:20px;
      padding:5px;
      background-color:#f2f5f7;
      border-radius:3px;
    }
    
    .input-lab{
    	font: normal 13px sans-serif;
    	color:#555555;
    }
    
    .input-div input{
      width:260px;
      height:23px;
      padding-left:5px;
      font: normal 13px sans-serif;
      color:#aeaeae;
      border-radius:3px;
      border: 1px solid #bfc4c6;
      outline:none;
    }
    .input-div:hover{
      background-color:#e0f1fc;
    }
    .input-div input:hover{
      border-color:#7d6ced;
    }
    #input-senha{
      margin-top:-20px;
    }
    
    #botoes{
      width:270px;
      margin-left: 25px;
    }
    #botao{
      float:right;
      background-color:red;
      padding:5px 15px;
      font:bold 12px sans-serif;
      border-radius:5px;
      text-shadow:0px 1px 0px white;
      border: 1px solid #9eb9c3;
      background: rgb(237,246,249); /* Old browsers */
      background: -moz-linear-gradient(top,  rgba(237,246,249,1) 0%, rgba(205,229,238,1) 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(237,246,249,1)), color-stop(100%,rgba(205,229,238,1))); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top,  rgba(237,246,249,1) 0%,rgba(205,229,238,1) 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top,  rgba(237,246,249,1) 0%,rgba(205,229,238,1) 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top,  rgba(237,246,249,1) 0%,rgba(205,229,238,1) 100%); /* IE10+ */
      background: linear-gradient(to bottom,  rgba(237,246,249,1) 0%,rgba(205,229,238,1) 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edf6f9', endColorstr='#cde5ee',GradientType=0 ); /* IE6-9 */
      color:#527988;
      box-shadow:0px 0px 10px #c9c9c9;
    }
    
    #botao:hover{
      background: rgb(205,229,238); /* Old browsers */
      background: -moz-linear-gradient(top,  rgba(205,229,238,1) 0%, rgba(237,246,249,1) 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(205,229,238,1)), color-stop(100%,rgba(237,246,249,1))); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top,  rgba(205,229,238,1) 0%,rgba(237,246,249,1) 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top,  rgba(205,229,238,1) 0%,rgba(237,246,249,1) 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top,  rgba(205,229,238,1) 0%,rgba(237,246,249,1) 100%); /* IE10+ */
      background: linear-gradient(to bottom,  rgba(205,229,238,1) 0%,rgba(237,246,249,1) 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cde5ee', endColorstr='#edf6f9',GradientType=0 ); /* IE6-9 */
      cursor:pointer;
    }
    #lembrar-senha{
      font: normal 12px sans-serif;
    }
    
    #logo-box{
      background-color:1992b7;
      width: 380px;
      height: 60px;
      margin: 40px auto 0px;
      border-radius: 5px;    
    }
  </style>
</h:head> 
<h:body> 
	<div id="logo-box">
		<img src="../resources/imagens/logo_cpsobras.png" alt="" />
	</div>
	
	<h:panelGroup rendered="#{!empty param.login_error}">
		<span style="font-color:red"> Erro ao efetuar o login.</span><br />
		<br/>
		Motivo: #{SPRING_SECURITY_LAST_EXCEPTION.message}
	</h:panelGroup>
	
	<form id="login" method="post" action="#{request.contextPath}/j_spring_security_check">
	<div id="login-box">
		<div id="login-box-interno">
			<div id="login-box-label">
				Login CPS Obras
		  	</div>
		 	<div class="input-div" id="input-usuario">
		 		<div class="input-lab">Usuário:
					<input type="text" id="usuario" name="j_username" />
		  		</div>
		  	</div>
		  	<div class="input-div" id="input-senha">
		  		<div class="input-lab">Senha:
					<input type="password" id="senha" name="j_password" />
		  		</div>
		  	</div>
		  	<div id="botoes">
				<div id="botao">
					<input type="submit" value="Login" />
				</div>
		  	</div>
		</div>
	  </div>
	  <script>
		document.getElementById("login").j_username.value = "#{SPRING_SECURITY_LAST_USERNAME}";
	  </script>
	</form>
</h:body> 
</html>
